<template>
    <div class="list">
        <template v-if="mold === 'thumbnail'" v-for="item in items">
            <router-link class="thumbnail" :class="'list_'+item.id" :to="{name: 'DetailView', params: {id: item.id}}" :key="item.id">
                <div class="content">
                    <img :src="item.image_hlarge" alt="cover">
                    <h3>{{item.title}}</h3>
                    <p>{{item.content | subStr}}</p>
                </div>
                <div class="author">
                    <span class="name">{{item.category_name}}</span>
                    <span class="label" v-if="item.subcategory_name">
                        本活动来自栏目 {{item.subcategory_name}}
                    </span>
                </div>
            </router-link>
        </template>
        <template v-if="mold === 'basic'">
            <ul class="basic">
                <li v-for="(item, index) in items" :key="index">
                    <a href="#">
                        <h3>{{item.title}}</h3>
                        <div class="info">{{item.comments}}</div>
                    </a>
                </li>
            </ul>
        </template>
    </div>
</template>

<script>
export default {
    name: 'list',
    props: {
        mold: {
            type: String,
            default: 'basic'
        },
        items: {
            type: Array,
            required: true
        }
    },
    data(){
        return {

        }
    },
    filters: {
        subStr: function(value){
            if(!value) return '';
            let newVal = value.replace(/<.*?>/g, '');
            return newVal.slice(0, 30);
        }
    }
}
</script>

<style lang="scss" scoped>
    .list {
        .thumbnail {
            position: relative;
            display: block;
            padding: 2.5rem 1.8rem 2.5rem 0;
            margin-left: 1.8rem;
            border-bottom: 1px solid #ccc;
            .content {
                overflow: hidden;
                margin-bottom: 1rem;

                h3 {
                    margin-top: 0;
                    margin-bottom: 0.6rem;
                    line-height: 1.5;
                    font-size: 1.7rem;
                    font-weight: 500;
                    color: #494949;
                    overflow: hidden;
                }
                p {
                    line-height: 1.5;
                    text-align: justify;
                    color: #aaa;
                    font-size: 1.2rem;
                    overflow: hidden;
                }
                img {
                    float: right;
                    width: 25.6%;
                    height: auto;
                    margin-left: 2.5rem;
                }
            }
        }
    }

    .basic {
        h3 {
            padding: 0;
            line-height: 1.41;
            font-size: 1.7rem;
            font-weight: 500;
            color: #494949;
        }
        .info {
            margin-top: 0.5rem;
            font-size: 1.4rem;
            color:#42bd56;
        }
    }
</style>


